<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜单列表</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <h3 class="big-tit">菜谱列表</h3>
    <ul class="list-box">
      <!-- <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li>
      <li>
        <a href="info.html">
          <img
            src="http://yun.itheima.com/Upload/Images/20220627/62b924298e658.jpg"
            alt=""
          />
          <h3>菜单名称</h3>
        </a>
      </li> -->
    </ul>
    <p class="more">数据正在加载中...</p>
    <p class="noinfo">没有数据了...</p>
  </body>
  <script src="../jquery.min.js"></script>
  <script src="../baseApi.js"></script>
  <script src="../06-recipeBaseCode/js/index.js"></script>

  <!-- <script>
    let totalP = 0;
    let pageNum = 1;
    function render(pageNum) {
      $.get(
        "http://124.223.14.236:3001/api/recipe",
        { pageNum: pageNum, pageSize: "15" },
        function (res) {
          console.log(res);
          if (!res.success) return alert("获取失败");
          //获取商品总页数
          // totalP = parseFloat(res.data.total / res.data.pageSize);
          // //判断页数是否最大 显示数据加载或有底线
          // res.data.pageNum == Math.ceil(totalP)
          //   ? $(".noinfo").show().siblings(".more").hide()
          //   : $(".more").show().siblings(".noinfo").hide();
          let str = "";
          $.each(res.data.list, function (i, item) {
            str += ` <li>
        <a href="info.html" data-id='${item.id}'>
          <img src="http://124.223.14.236:3001/public/food/list-${item.id}.jpg" alt="" />
          <h3>${item.name}</h3>
        </a>
      </li>`;
          });
          $(".list-box").append(str);
        }
      );
    }
    render(pageNum);

    window.addEventListener("scroll", function () {
      let top = $(window).scrollTop();
      if (top > 100) {
        pageNum++;
        render(pageNum);
      }
    });
    $(".list-box").on("click", "a", function (e) {
      let menuId = $(this).attr("data-id");
      localStorage.setItem("menuId", menuId);
    });
  </script> -->
</html>
